<template>
     <button v-if="msg<=5" v-btn @click="abtn">{{msg}}</button>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    
    setup () {
        const state = reactive({
            msg:0
        })
        const abtn = () => {
                state.msg++;
            }
        return {
            ...toRefs(state),
            abtn
        }
    },
    directives:{
        btn:{                                       //局部自定义指令
            mounted: () => console.log('mounted'),  //钩子函数
            updated: (el) => {                 //钩子函数
                el.innerHTML = '钩子函数' +el.innerHTML;
                console.log('updated')
            },
            unmounted: () => console.log('unmounted')               //钩子函数
        }
    }
}
</script>
